<template>
  <header class="header">
    <a class="header-logo" href="#home" style="text-decoration: none;">
      <h2 class="header-title">AIToEdu</h2>
      <img src="../assets/logo.png" style="height: 40px">
    </a>
    <nav>
      <a href="#home">首页</a>
      <a href="#help">帮助</a>
      <a href="#about">关于我们</a>
      <a href="#aiteacher">ai教师</a>
      <a href="#aiteacher">教师端</a>
      <a href="#students">学生端</a>
    </nav>
    <div class="search-login">
      <div class="search-box">
        <el-input type="text" size="large" prefix-icon="Search" placeholder="搜索" class="el-input"></el-input>
      </div>
      <div class="header-buttons">
        <el-button size="large">登录</el-button>
        <el-button size="large">注册</el-button>
      </div>
    </div>
  </header>
  <main class="main-content">
    <div class="illustration">
      <img src="../assets/svg/welcome/teacher.svg" alt="Illustration" style="width: 800px"> <!-- 插图图片 -->
    </div>
    <div class="text-content">
      <h1>利用AI技术<br>提供专业、高效的教育服务</h1> <!-- 主标题 -->
      <el-button class="try-button">立即体验</el-button>
    </div>
  </main>
  <div class="white-space">
    <div class="aiteacher-container">
      <div class="main-header">
        <div class="logo-name">
          <strong>AIToEdu</strong>
        </div>
        <h1>学生私人定制的AI教师 —— 小*</h1>
        <p>能够及时响应学生的疑问、快速定位学生难点，提供个性化教学方案，帮助学生实现目标。</p>
      </div>

      <div class="card-container">
        <el-card v-for="card in cards1" :key="card.id" shadow="always" :class="{
          'special-card1': card.id === 2 || card.id === 4,
          'special-card2': card.id === 3
        }">
          <div :class="['card-icon', card.iconClass]"></div>
          <div class="card-content">
            <h3>{{ card.title }}</h3>
            <el-divider border-style="solid"></el-divider>
            <p>{{ card.description }}</p>
          </div>
        </el-card>
      </div>
      <div style="margin-top: 25px">
        <el-button class="cta-button">
          <el-icon>
            <ArrowRight />
          </el-icon>
          立即体验
        </el-button>
      </div>
    </div>

    <div class="aiclassroom-container">
      <div class="main-header">
        <div class="logo-name">
          <strong>AIToEdu</strong>
        </div>
        <h1>辅助教师精准教学的智慧课堂</h1>
        <p>即时分析学生上课状态，并向教师实时反馈数据分析结果，以辅助教师进行精准教学。</p>
      </div>
      <div class="card-container">
        <el-card v-for="card in cards2" :key="card.id" shadow="always" :class="{
          'special-card1': card.id === 2 || card.id === 4,
          'special-card2': card.id === 3
        }">
          <div :class="['card-icon', card.iconClass]"></div>
          <div class="card-content">
            <h3>{{ card.title }}</h3>
            <p>{{ card.description }}</p>
          </div>
        </el-card>
      </div>
      <div style="margin-top: 25px">
        <el-button class="cta-button">
          <el-icon>
            <ArrowRight />
          </el-icon>
          立即体验
        </el-button>
      </div>
    </div>
  </div>

  <div class="footer-up"></div>
  <footer class="footer">
    <div class="footer-content">
      <el-divider></el-divider>
    </div>
    <div class="footer-bottom">
      <div class="footer-logo">
        <h2 class="header-title">AIToEdu</h2>
        <img src="../assets/logo.png" style="height: 40px">
      </div>
      <div class="footer-copy">
        <a href="#privacy">使用指南</a> |
        <a href="#service-terms">开发者信息</a> |
        <a href="#cookie-settings">联系我们</a>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
    </div>
  </footer>
</template>

<script setup>

import { reactive } from 'vue'
const cards1 = reactive([
  {
    id: 1,
    iconClass: 'icon-1',
    title: '课后答疑',
    description: '解答你的每一个疑问，AI课后答疑轻松搞定'
  },
  {
    id: 2,
    iconClass: 'icon-2',
    title: 'AI家教',
    description: '解答你的每一个疑问，AI课后答疑轻松搞定'
  },
  {
    id: 3,
    iconClass: 'icon-3',
    title: '私人定制',
    description: '解答你的每一个疑问，AI课后答疑轻松搞定'
  },
  {
    id: 4,
    iconClass: 'icon-4',
    title: 'AI家教',
    description: '解答你的每一个疑问，AI课后答疑轻松搞定'
  },
  {
    id: 5,
    iconClass: 'icon-5',
    title: 'AI家教',
    description: '解答你的每一个疑问，AI课后答疑轻松搞定'
  }
])

const cards2 = reactive([
  {
    id: 1,
    iconClass: 'icon-1',
    title: '学习状态监控',
    description: '智慧课堂实时监控学生的学习状态，帮助教师了解每个学生的学习进度'
  },
  {
    id: 2,
    iconClass: 'icon-2',
    title: '反馈系统',
    description: '教师可以实时获得学生对知识点的理解情况，及时调整教学策略'
  },
  {
    id: 3,
    iconClass: 'icon-3',
    title: '数据驱动教学',
    description: '利用大数据分析，提供科学的教学建议和改进方案'
  },
  {
    id: 4,
    iconClass: 'icon-4',
    title: '安全保障',
    description: '智慧课堂注重数据安全和隐私保护，确保学生的个人信息不被泄露'
  },
  {
    id: 5,
    iconClass: 'icon-5',
    title: '精准教学',
    description: '智慧课堂收集并分析学生的学习数据，生成详细的报告，帮助教师制定个性化的教学计划'
  }
])

</script>

<style>
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: Arial, sans-serif;
  /* 设置整体字体 */
  box-sizing: border-box;
}

.header {
  height: 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #409eff;
  /* 头部背景颜色 */
  padding: 30px 50px 20px 50px;
}

.header .header-logo {
  display: flex;
  text-align: center;
  line-height: 5px;
}

.header .header-logo .header-title {
  color: white;
  width: 100px;
  margin-right: 10px;
}

.header nav {
  margin-left: -37%;
  display: flex;
  /* 导航用Flexbox布局 */
  gap: 30px;
  /* 导航链接之间的间距 */
}

.header nav a {
  color: white;
  /* 导航链接的字体颜色 */
  text-decoration: none;
  /* 去掉链接下划线 */
  font-size: 16px;
  /* 导航链接的字体大小 */
}

nav {
  text-align: left;
  /* 将导航栏文字左移 */
  margin-left: -800px;
  /* 左边内边距 */
}

nav a {
  display: inline-block;
  /* 使链接元素成为块级元素 */
  margin-right: 15px;
  /* 设置链接之间的间距 */
}

.header .search-login {
  display: flex;
  /* 搜索和登录部分用Flexbox布局 */
  align-items: center;
  /* 垂直居中对齐 */
  gap: 20px;
  /* 间距设置 */
}

.header .search-box {
  display: flex;
  /* 搜索框内部用Flexbox布局 */
  align-items: center;
  /* 垂直居中对齐 */
  padding: 5px 10px;
  /* 内边距 */
}

.header .search-box .el-input__inner {
  background-color: transparent;
}

.header .header-buttons {
  display: flex;
  gap: 15px;
}

.header .header-buttons button {
  width: 80px;
  height: 36px;
  border-radius: 15px;
  color: #339AF0;
}

.main-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1000px;
  padding: 30px;
  background-image: url("../assets/svg/welcome/main-background.svg");
  background-size: cover;
}

.main-content .illustration {
  margin-left: 80px;
  margin-top: -5%;
}

.main-content .text-content {
  color: white;
  text-align: left;
  padding-left: 20px;
  margin-right: 70px;
  margin-top: -15%;
}

.main-content .text-content .try-button {
  color: #339AF0;
  font-size: 30px;
  width: 200px;
  height: 70px;
  border-radius: 10px;
}

.main-content h1 {
  font-size: 50px;
  line-height: 1.5em;
}

.white-space {
  height: 2000px;
  background-color: #ffffff;
}

.aiteacher-container {
  display: flex;
  flex-direction: column;
  padding: 4% 10%;
}

.aiteacher-container .main-header {
  align-self: flex-start;
}

.aiteacher-container .main-header .logo-name {
  text-align: left;
  color: #23a6f0;
}

.aiteacher-container .main-header h1 {
  text-align: left;
  font-size: 42px;
  margin: 13px 0;
  color: #2c3e50;
}

.aiteacher-container .main-header p {
  font-size: 16px;
  margin-top: 0;
  color: #1385fb;
}

.aiteacher-container .card-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
  gap: 80px;
  margin-bottom: 30px;
}

.aiteacher-container .card-container .el-card {
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  width: 260px;
  height: 332px;
}

.special-card1 {
  margin-top: 50px;
}

.special-card2 {
  margin-top: 80px;
}

.card-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
}

.icon-4 {
  background-color: #b0e0e6;
}

.icon-2 {
  background-color: #ffa07a;
}

.icon-3 {
  background-color: #4682b4;
}

.icon-1,
.icon-5 {
  background-color: #ffa07a;
}

.card-content h3 {
  margin: 10px 0;
  font-size: 18px;
  color: #2c3e50;
}

.card-content p {
  font-size: 14px;
  color: #7f8c8d;
}

.aiteacher-container .cta-button {
  padding: 10px 20px;
  margin-top: 10px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  width: 260px;
  height: 50px;
}

.aiclassroom-container {
  display: flex;
  flex-direction: column;
  padding: 4% 10%;
}

.aiclassroom-container .main-header {
  align-self: flex-start;
}

.aiclassroom-container .main-header .logo-name {
  text-align: left;
  color: #23a6f0;
}

.aiclassroom-container .main-header h1 {
  text-align: left;
  font-size: 42px;
  margin: 13px 0;
  color: #2c3e50;
}

.aiclassroom-container .main-header p {
  font-size: 16px;
  margin-top: 0;
  color: #1385fb;
}

.aiclassroom-container .card-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
  gap: 80px;
  margin-bottom: 30px;
}

.aiclassroom-container .card-container .el-card {
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  width: 260px;
  height: 332px;
}

.special-card1 {
  margin-top: 50px;
}

.special-card2 {
  margin-top: 80px;
}

.card-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
}

.icon-4 {
  background-color: #b0e0e6;
}

.icon-2 {
  background-color: #ffa07a;
}

.icon-3 {
  background-color: #4682b4;
}

.icon-1,
.icon-5 {
  background-color: #ffa07a;
}

.card-content h3 {
  margin: 10px 0;
  font-size: 18px;
  color: #2c3e50;
}

.card-content p {
  font-size: 14px;
  color: #7f8c8d;
}

.aiclassroom-container .cta-button {
  padding: 10px 20px;
  margin-top: 10px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 15px;
  width: 260px;
  height: 50px;
}

.footer-up {
  background-image: url("../assets/svg/welcome/footer-background.svg");
  height: 200px;
  background-size: cover;
}

.footer {
  background-color: #409eff;
  /* 页脚背景颜色 */
  color: white;
  /* 页脚字体颜色 */
  padding: 50px;
  /* 页脚内边距 */
}

.footer .footer-content {
  display: flex;
  flex-wrap: wrap;
  /* 允许换行 */
  justify-content: space-between;
  gap: 20px;
}

.footer .footer-content div:nth-child(1) {
  align-content: center;
}

.footer .footer-logo {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
  margin-left: 5%;
}

.footer .footer-logo h2 {
  margin-right: 10px;
}

.footer h3 {
  margin-bottom: 10px;
  /* 标题下方的间距 */
}

.footer a {
  color: white;
  /* 链接颜色 */
  text-decoration: none;
  /* 去掉链接下划线 */
  display: block;
  /* 块级显示 */
  margin-bottom: 5px;
  /* 链接下方的间距 */
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.footer-bottom .footer-copy {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  text-align: center;
  gap: 30px;
}
</style>
